<template>
	<view class="LoopBox">
		<view class="LoopTitle" @click="toLogin">
			<text>西望环线</text>
			<view class="right" @click="toAllDestination">
				<text>更多</text>
				<!-- <image src="../../static/index/Icon _ Light _ Chevron _ Previous (1).png" mode=""></image> -->
			</view>
		</view>
		<view class="LoopCard" v-for="(LoopItem,index) in [...LoopData].reverse().slice(0,4)" :key="index" @click="toLoopPage(LoopItem.loop_id)">
			<!-- <text>{{LoopItem.loop_name}}</text> -->
			<image :src="`${imageUrl}${LoopItem.loop_img_cover}`" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getLoop
	} from '@/config/API/home.js'
	import {
		imageUrl
	} from '@/config/request/request.js'
	import {
		routerGuard
	} from '@/config/RouteGuard.js'
	const LoopData = ref([])
	onLoad(async () => {
		const getLoopData = await getLoop()
		LoopData.value = getLoopData.data
		console.log('LoopData', LoopData.value);
	})
	const toLoopPage = (id) => {
		const url = `/homeSubpages/Loop/Loop?id=${id}`;
		routerGuard(url);
	}
	const toAllDestination = () => {
		const url = `/pages/allDestination/allDestination`;
		routerGuard(url);
	}
</script>

<style lang="scss" scoped>
	.LoopBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 22rpx;

		.LoopTitle {
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.right {
				width: 18%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 12rpx;

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(115, 115, 115, 1);
				}

				image {
					height: 22rpx;
					width: 12.57rpx;
				}
			}
		}

		.LoopCard {
			width: 343rpx;
			height: 176rpx;
			border-radius: 16rpx;
			background-color: #d3f1ff;
			overflow: hidden;
			position: relative;

			text {
				position: absolute;
				left: 30rpx;
				top: 20rpx;
				font-size: 40rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>